<style scoped>
    .article-article-item {
        display: block;
        width: 100%;
        position: relative;
        padding-top: 10px;
    }

    .article-article-item > img {
        width: 100%;
        border-radius: 10px;
    }

    .article-article-item > p {
        position: absolute;
        padding-left: 6%;
        display: block;
        z-index: 10;
        width: 86%;
        margin: 0 auto;
        bottom: 10px;
        color: white;
        word-break: break-all;
    }

    .article-article-item > img[lazy=loading] {
      width: 40px;
      height: 40px;
      padding: 80px;
    }

</style>

<template>
    <div class="article-article" >
        <a class="article-article-item" v-link="{name: 'article', query: article}">
            <img v-lazy="article.src" />
            <p>{{ article.title }}</p>
        </a>
    </div>
</template>

<script>

    export default {
        props: ['value'],
        computed: {
            article: ({value}) => JSON.parse(value),
        }
    }

</script>
